<template>
  <!--进行第二次路由  -->
  <!--路由组件出口的位置，给其添加动画    -->
  <router-view v-slot="{ Component }">
    <transition name="fade">
      <!--要渲染一级路由组件layout的子路由        -->
      <component :is="Component" v-if="flag" />
    </transition>
  </router-view>
</template>

<script setup lang="ts">
  import { nextTick, ref, watch } from 'vue'
  import { useSettingStore } from '@/store/modules/setting'

  let settingStore = useSettingStore()

  const flag = ref(true) /*控制当前组件是否销毁重建*/

  /*监听仓库内部的数据是否发生变化*/
  watch(
    () => settingStore.refresh,
    () => {
      flag.value = false
      /*nextTick 来等待 DOM 更新，更新完成后重建*/
      nextTick(() => {
        flag.value = true
      })
    },
  )
</script>

<style lang="scss" scoped>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
</style>
